<template>
    <!-- 修改订单消息 -->
    <div>
        <el-form :model="order" ref="orderForm" label-width="120px">
            <el-form-item label="商品名称:">
                {{ order.Goodsname }}
            </el-form-item>

            <!-- 图片 -->
            <el-form-item label="商品图片">
                <template>
                    <el-avatar :src="image + order.Images"></el-avatar>
                </template>
            </el-form-item>

            <!-- OrderStatus -->
            <el-form-item label="订单状态" :rules="{ required: true, message: '请输入订单状态', trigger: 'blur' }">
                <el-radio-group v-model="order.OrderStatus">
                    <el-radio label="待制作"></el-radio>
                    <el-radio label="制作中"></el-radio>
                    <el-radio label="已完成"></el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- Notes -->
            <el-form-item label="备注" :rules="{ required: true, message: '请输入备注', trigger: 'blur' }">
                <el-input v-model="order.Notes" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
            <!-- 操作按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import bases from '../../plugins/base.js'
export default {
    data() {
        return {
            image: bases.imgUrl,
            order: {
                userName: '',
                Did: '',
                UserId: null,
                Gpvid: null,
                CreateDate: new Date(),
                OrderStatus: '',
                TotalAmount: 0,
                OrderNumber: 0,
                Notes: ''
            }
        };
    },
    methods: {
        submitForm() {
            this.$refs.orderForm.validate((valid) => {
                if (valid) {
                    // 这里可以添加提交数据到后端的逻辑
                    this.axios({
                        method: 'put',
                        url: 'Orders',
                        data: this.order
                    }).then(res => {
                        console.log('res: ', res);
                        //关闭弹窗
                        if (res.status === 200) {
                            this.$emit('refresh');  // 刷新父组件数据
                            //关闭弹窗
                            this.$emit("change", false);
                            this.$message.success('提交成功');
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                } else {
                    this.$message.error('表单验证失败，请检查输入');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.orderForm.resetFields();
        }
    },
    created() {
        //创建之后
        this.order = this.data;
    },
    model: {
        prop: 'dialogVisible',
        event: 'change'
    },
    props: ['data'],
    watch: {
        data: function (newVal, oldVal) {
            //监听到data变化时执行
            console.log(oldVal);
            this.order = newVal;
        }
    }
};
</script>